<template>
<div class="alread-wrapper">
    <div class="view">
        <div class="serch-view">
            <div class="search">
                <span>添加日期:</span>
                <Input v-model="alreadData.areaStart" style="width:150px" placeholder="请输入日期"/>
                </div>
                <div class="search">--</div>
                <div class="search">
                    <Input v-model="alreadData.areaEnd" style="width:150px" placeholder="请输入日期"/>
                </div>
                    <div class="search">
                        <Button type="primary" @click="clickAlread" style="margin-left:20px">搜索</Button>
                    </div>
                    <div class="search  fr">
                        <Button type="primary" @click="addShow">添加企业</Button>
                    </div>
                </div>
                <div class="main-ivew">
                    <AlreadyList :data="listData" @on-action="clickDel"></AlreadyList>
                </div>

                <div class="page-view">
                    <pageView :data="pageData" @on-change-page="changePage" @on-change-pagesize="changePagesize">

                    </pageView>
                </div>
                <!--对话框-->
                <div v-if="addModal.isShow">
                    <AlreadyModal :data='addModal' @on-submit="addAlready"></AlreadyModal>
                </div>
            </div>
        </div>
</template>

<script>
import AlreadyList from '@/view/alreadyCompany/list/AlreadyList'
import AlreadyModal from '@/view/alreadyCompany/list/AlreadyModal'
import PageView from '@/components/Page'

export default {
    components: {
        AlreadyList,
        AlreadyModal,PageView
    },
    data() {
        return {
            alreadData: {
                areaStart: '',
                areaEnd: ''
            },
            // 表格数据
            listData: {
                isLoading: false,
                data: [{
                        name: '北京百立丰科技股份有限公司',
                        time: '2078-12-12'
                    },
                    {
                        name: '北京百立丰科技股份有限公司',
                        time: '2078-12-12'
                    }, {
                        name: '北京百立丰科技股份有限公司',
                        time: '2078-12-12'
                    }, {
                        name: '北京百立丰科技股份有限公司',
                        time: '2078-12-12'
                    }, {
                        name: '北京百立丰科技股份有限公司',
                        time: '2078-12-12'
                    },
                ]
            },

            // 对话框
            addModal: {
                isShow: false,
                isLoading: false,
                // row: null,
                data: {}
            },

            // 分页
            pageData:{
                currentPage:0, // 第几页
                pageSize:10, //每页几条
                totalSize:5 // 总页数
            }
        };
    },
    methods: {
        // 搜索
        clickAlread() {
            //   console.log(this.alreadData)
        },
        // 删除
        clickDel(type, formData) {
            //    console.log(type,formData)
            // 就一个可以直接发送请求
        },

        addAlready(formData) {
            //  console.log(formData)
        },

        addShow() {
            this.addModal.isShow = true
        },

        // 分页
        changePage(page) {
            this.pageData.currentPage=page-1
        },
        changePagesize(pagesize) {
            this.pageData.pageSize = pagesize
        }
    },
};
</script>

<style lang="less" scoped>
.alread-wrapper {
    padding: 40px 20px;

    .view {
        background-color: #fff;
        border: 1px solid #e6e6e6;
        padding: 30px 20px;

        .serch-view {
            margin-bottom: 35px;

            .search {
                display: inline-block;
            }
        }

    }
}
</style>
